<template>
  <div>
<!--  {{}} 插值语法-->
    <h1>{{msg}}</h1>
<!--  v-once  数据只第一次时显示，不响应式 所以num--后p标签的值不会变化 -->
    <button @click="num--">-</button>
    <input type="text" v-model="num">
    <p v-once>{{num}}</p>
<!-- v-pre   内容原封不动的展示，并不会解析-->
    <p v-pre>{{msg}}</p>
<!--  v-text  就相当于插值表达式的功能-->
    <p v-text="msg"></p>
<!--  v-html  可以解析html标签-->
    <p v-html="url"></p>
  </div>
</template>

<script>

export default {
  name: "App",
  data(){
    return{
      msg:'这是插值语法中的数据',
      num:100,
      // 带标签的语法用``来包裹
      url:`<a href="http://www.baidu.com">百度</a>`
    }
  },
  methods:{

  }
}
</script>

<style scoped>

</style>